<template>
    <div>
        <van-nav-bar title="优惠券" left-text="返回" left-arrow @click-left="onClickLeft" />
        <div v-for="item in ticketArr" :key="item.time">
            <div class="tickex">
                <div class="tickex_box">
                    <p>{{item.title}}商品优惠券</p>
                    <p style="font-size:12px">有限期 {{ item.start_time }}-{{ item.end_time }}</p>
                    <div></div>
                </div>
                <div class="btn">
                    <div>
                        <p>￥<span style="font-size:30px">{{item.jian_price}}</span></p>
                        <p style="font-size:12px">满{{item.menkan_price}}使用</p>
                    </div>
                    <div>
                        <van-icon name="bag-o" />
                    </div>
                </div>
            </div>
            <van-button style="width:90%;margin: 0 20px; background-color:#EE8A34 ; color: #FFF;" @click="draw(item.id)">确认领取
            </van-button>
        </div>
    </div>
</template>
<script>
import { couponListData } from '../../api/index';
export default {
    data() {
        return {
            querys:{},
            ticketArr: []
        }
    },
    methods: {
        onClickLeft() {
            this.$router.back()
        },
        async draw(couponid) {
           let res=await this.$frontaxios.post(this.$front.insertUserCoupon,{couponid});
           if(res.code==1){
               this.$toast.success('领取优惠券成功');
           }else if(res.code==-2){
               this.$dialog.alert({title:"温馨提示",message:"你领取的数量已经超过限额"});
           }else if(res.code==-3){
               this.$dialog.alert({title:"温馨提示",message:"该优惠券已被抢光了"});
           }
           this.getData();
        },
        // async getData(){
        //    let res=await this.$frontaxios.post(this.$front.getColumnCoupon,{columnid:this.$route.query.columnid});
        //     console.log(res);
        //     if(res.code==1){
        //       this.ticketArr=res.data;
        //     }
        // },
        async query() {
            let rst=await couponListData(this.querys)
            console.log(rst)
            rst.data.list.map(item=>{
                // if(item.id==this.$route.query.id){
                //     this.ticketArr.push(item);
                // }
				this.ticketArr.push(item);
            })
            // console.log(this.ticketArr)
        },
    },
    created(){
       if(this.$route.query.id){
        this.query()
       }else{
        this.getData();
       }
       
    }
}
</script>
<style lang='scss' scoped>
.tickex {
    height: 200px;
    color: #FFF;
    background-color: orange;
    width: 90%;
    margin: 20px;
}

.tickex_box {
    text-align: center;

    p {
        margin-top: 10px;
    }
}

.van-icon {
    color: #E3B55D;
    font-size: 80px;
}

.btn {
    margin-top: 20px;
    padding: 10px;
    display: flex;
    justify-content: space-between;

    p {
        margin-top: 10px;
    }
}
</style>
